import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'

<Meta
  title="Components/Video/Embed"
/>

# Video embed

To make an embed video responsive and keep its ratio, wrap it with a `ratio ratio--[variant]` class.
If the video need a label, use the `figure` and `figcaption`combination.

```html
<figure>
  <div class="ratio ratio--16/9">
    <iframe
      width="560" height="315"
      src="//www.youtube-nocookie.com/embed/vIG4cKz7ukM"
      title="YouTube video player"
      frameborder="0" allowfullscreen
    />
  </div>
  <figcaption>Video label — © Author Name</figcaption>
</figure>
```

Wrapped into a `ratio` parent, the `iframe` element becomes responsive and keeps a specific ratio. Thus, the video width is defined by the `container` parent, and the video height is defined by the `ratio--[variant]` class. The `width` and the `height` attributes of the `iframe` element have no effect anymore.

<Canvas>
  <div class="container container--grid gap--responsive">
    <div class="container__center--xs">
      <h3 class="h3">4/3 video in a tight and centered container</h3>
      <figure>
        <div class="ratio ratio--4/3">
          <iframe
            width="1600" height="900"
            src="//www.youtube-nocookie.com/embed/vIG4cKz7ukM"
            title="YouTube video player"
            frameborder="0" allowfullscreen
          />
        </div>
        <figcaption>Geoinformation - Alles findet irgendwo statt — © Swiss Geoportal</figcaption>
      </figure>
    </div>
    <div class="container__center--md">
      <h3 class="h3">16/9 video in a medium and centered container</h3>
      <figure>
        <div class="ratio ratio--16/9">
          <iframe
            width="560" height="315"
            src="//www.youtube-nocookie.com/embed/vIG4cKz7ukM"
            title="YouTube video player"
            frameborder="0" allowfullscreen
          />
        </div>
        <figcaption>Geoinformation - Alles findet irgendwo statt — © Swiss Geoportal</figcaption>
      </figure>
    </div>
  </div>
</Canvas>
